---
layout: single
property_name: font
---

<section id="font" class="property property--shorthand">
  <header class="property-header">
    <nav class="property-links">
        <a class="property-collection" href="{{site.url}}/typography/">
          In collection: <strong>typography</strong>
        </a>
      <a class="property-links-direct" href="{{site.url}}/property/font/" data-property-name="font" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="font">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#font"><span>#</span>font</a>
    </h2>
    <div class="property-description">
      <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/font-style" data-property-name="font-style">font-style</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/font-variant" data-property-name="font-variant">font-variant</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/font-weight" data-property-name="font-weight">font-weight</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/font-size" data-property-name="font-size">font-size</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/line-height" data-property-name="line-height">line-height</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/font-family" data-property-name="font-family">font-family</a></code>.</p>

    </div>

  </header>






</section>
